<template>
  <div class="layout w-full h-full">
    <div class="layout-header">
      <my-header />
    </div>
    <div class="layout-title pl-6">
      {{ router.currentRoute.value.meta.title }}
    </div>
    <div
      :class="[
        'layout-view',
        router.currentRoute.value.meta.title
          ? 'h-[calc(100%-6.875rem-1rem)] mx-6'
          : 'h-[calc(100%-3.75rem)]'
      ]"
    >
      <router-view @routerChange="routerChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
// import type { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useRouters } from '@/hooks/useRouters'
import MyHeader from '@/layouts/components/MyHeader.vue'
import { useInfoStore } from '@/store'
// import Menu from '../components/NewMenu.vue'
// import { useCollapsed } from '@/hooks/useCollapsed'

const router = useRouter()
const selectedKeys = ref<string[]>([])

// const computedRoutePathStyle = computed((): string[] => {
//   const path = router.currentRoute.value.path
//   const flag = path === '/'
//   const rightBc = ['right', 'p-6']
//   return flag ? ['home', ...rightBc] : ['', ...rightBc]
// })

// const computedContentStyle = computed(() => {
//   return userStore.isShowHeader ? 'h-[calc(100%-60px)]' : 'h-full'
// })

onMounted(() => {
  selectedKeys.value = [router.currentRoute.value.path]
})

watch(
  () => router.currentRoute.value.path,
  () => {
    selectedKeys.value = [router.currentRoute.value.path]
  }
)

const routerList = ref<any[]>([
  {
    menuName: '首页',
    path: '/',
    children: [],
    menuId: 0,
    menuType: 'C'
  }
])
// 个人信息

const { getRouters } = useRouters()

const getRouterFun = async () => {
  const data = await getRouters()
  routerList.value = [...routerList.value, ...data]
  userStore.getRouters(routerList.value)
}
const userStore = useInfoStore()

// const handleClick: MenuProps['onClick'] = (menuInfo: any) => {
//   router.push(menuInfo.key as string)
// }

const isNew = computed(() => {
  return userStore.isNew
})

watch(
  () => isNew.value,
  () => {
    if (isNew.value) {
      getRouterFun()
      selectedKeys.value = []
    }
  }
)
const routerChange = (path: string) => {
  selectedKeys.value = [path]
}

getRouterFun()
</script>

<style lang="less" scoped>
.layout {
  background-color: #f2f3f5;

  // &-header {}

  &-title {
    font-size: 1rem;
    font-weight: bold;
    line-height: 3.125rem;
  }

  &-view {
    position: relative;
    font-size: 0.875rem;
    background-color: #fff;
    border-radius: 0.5rem;
  }
}
</style>
